<!-- 编辑策略ID -->
<template>
  <div>
    <a-modal
      :title="$t('Edit-policy-ID')"
      v-model="modalVisible"
      width='30%'
      @ok='handleSubmit'
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <!-- has-feedback -->
        <a-form-item :label="$t('Policy-ID')" v-bind="formLayout">
          <a-select v-decorator="['policy_id',{
            rules:[
              // {required:true,message:$t('Choose')+$t('Policy-ID')}
            ], initialValue: targetBlock.strategy_id ? targetBlock.strategy_id : undefined
          }]"
            :placeholder="$t('Choose')+$t('Policy-ID')"
            allowClear
          >
            <a-select-option v-for="item in strategyData" :value='item.id' :key="item.id">
              {{idFormat(item.id)}}，{{item.create_time}}，{{item.username}}，{{item.identifier}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{$t('Reset')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { idFormat } from '@/untils/formatMethods'

export default {
  name: "RenameSnap",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    currentPolicyId: {
      type: String,
      required: true
    },
    targetBlock: {
      type: Object,
      required: true
    },
    strategyData: {
      type: Array,
      required: true,
      default: () => { return [] }
    }
  },
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //提交编辑策略ID
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err) {
          this.submitLoading = true;
          const params = {
            pool_id: this.targetBlock.pool_id,
            image_id: this.targetBlock.id,
            strategy_id: value.policy_id ? value.policy_id : '',
          }
          const res = await this.$api.blockInfo.editStrategyIdRequest(params)
          try {
            if(res) {
              this.model(res.data.id) //返回模板
              this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
              if(res.data.flag == 0) {
                this.$emit('updateInfo')
              }
            }
          }catch(error) {
            this.$message.error(error);
          }
          this.handleCancel()
          this.submitLoading = false;
        }
      })
    },

    //将id变成4位数 0001 0010 0100 1000
    idFormat(value) {
      return idFormat(value);
    },

    //关闭编辑策略ID
    handleCancel() {
      this.$emit('closeOperationModal', 'edit-strategy');
      this.form.resetFields(); //重置弹窗
    },

    //重置操作
    handleReset() {
      this.form.setFieldsValue({
        policy_id: []
      })
      // this.form.resetFields(); //重置弹窗
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>